<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>神仙玩法</title>
    <script src="../static/js/jquery-3.7.1.min.js" type="text/javascript"></script>
    <style>
    table {
        border-collapse: collapse; /*合并边框*/
        width: 100%; /*设置表格宽度*/
    }

    th, td {
        border: 1px solid black; /*设置边框线样式、颜色和大小*/
        padding: 8px; /*设置内边距*/
        text-align: center;
    }
    .xuan{
            background-color: red;
            color: white;
    }
</style>

</head>
<body>
<table id="t">
<thead>
<tr>
    <td colspan="5" style="background-color: #39C5BB">比赛信息</td>
    <td style="background-color: #FF4000">神仙玩法</td>
</tr>
<tr>
    <td>开赛时间</td>
    <td>场次</td>
    <td>比赛</td>
    <td>类型</td>
    <td>让球</td>
    <td></td>
</tr>
</thead>
</table>
</body>

<script type="text/javascript">
    $(function () {
        load();
    });
    function load() {
            // 获取后台数据
            $.get('/play_ds', function (res) {
                let arr = [];
                for (let day in res) {
                    arr.push("<tr>");
                    arr.push("<td colspan='13'>");
                    arr.push("竞猜日期:" + day);
                    arr.push("</td>");
                    arr.push("</tr>");
                    for (let d of res[day]) {
                        arr.push("<tr>");
                        arr.push("<td>");
                        arr.push(d.INFO.matchDate +" "+d.INFO.matchTime);
                        arr.push("</td>");

                        arr.push("<td>");
                        arr.push(d.INFO.matchNumStr);
                        arr.push("</td>");

                        arr.push("<td>");
                        arr.push(d.INFO.homeTeamAbbName);
                        arr.push(" VS ");
                        arr.push(d.INFO.awayTeamAbbName);
                        arr.push("</td>");

                        arr.push("<td>");
                        arr.push(d.INFO.leagueAbbName);
                        arr.push("</td>");

                        arr.push("<td>");
                        arr.push(d.INFO.goalLine);
                        arr.push("</td>");

                        arr.push("<td>");
                        arr.push(...showinfo(d));
                        arr.push("</td>");

                        arr.push("</tr>");
                    }
                }
                $("#t").append(arr.join(" "))
            });

        }
    // 显示统计信息里面的表格信息
    function showinfo(ds) {
        let arr = [];
        arr.push(...showDetail(ds.HAD,'胜平负',"had",ds.INFO));
        arr.push(...showDetail(ds.HHAD,'让球胜平负',"hhad",ds.INFO));
        arr.push(...showDetail(ds.TTG,'总进球',"ttg",ds.INFO));
        arr.push(...showDetail(ds.HAFU,'半全场',"hafu",ds.INFO));
        arr.push(...showDetail(ds.CRS,'比分',"crs",ds.INFO));
        return arr;
    }
    function showDetail(ds,name,tp,m) {
            let matchId = m.matchId
            let arr = [];
            arr.push("<div style='display: flex;justify-content: flex-start;'>");
            arr.push("<div style='border: 1px solid cornflowerblue;width: 90px'>"+name+"</div>");
            arr.push("<div style='display: flex;justify-content: flex-start;'>");
            arr.push("<div>");
            let ss = []
            if(ds.length>16){
                ss.push(16);
                ss.push(ds.length);
            }else{
                ss.push(ds.length);
            }
            for(let j=0;j<ss.length;j++){
                let st = ss[0];
                if(j === 0){
                    st = 0;
                }
                let s = ss[j];
                arr.push("<div style='display: flex;justify-content: space-between;'>");
               for(let i=st;i<s;i++){
                   let d = ds[i];
                   let id = matchId+tp+d.fname;
                    arr.push("<div id='"+id+"' sel='0' onclick='selectT(this)' pei='"+d.pei+"' style='border: 1px solid cornflowerblue;width: 60px;cursor: pointer'>");
                    arr.push("<div>");
                    arr.push(d.nickname);
                    arr.push("</div>");
                    arr.push("<div style='font-size: 15px;font-weight: bold'>");
                    arr.push(d.jiang);
                    arr.push("</div>");
                    arr.push("</div>");
               }
               arr.push("</div>");
            }
           arr.push("</div>");
           arr.push("</div>");
           arr.push("</div>");
           return arr;
       }
       function selectT(c){
        let sel = $('#'+c.id).attr("sel");
            if(sel === '0'){
                $('#'+c.id).addClass("xuan");
                $('#'+c.id).attr("sel",'1');
            }else{
                $('#'+c.id).removeClass("xuan");
                $('#'+c.id).attr("sel",'0');
            }
       }
</script>
</html>